<template>
  <PageWrapDrawer :show="show" :isUpdate="props.isUpdate" :title="title" title-suffix="按钮"
  @success="onSubmit" 
  @on-drawer-close="onClose">
    <Form name="basic"
          :model="insideData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
          layout="horizontal"
    >
    <Row>
      <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="按钮" name="name" v-bind="validateInfos['data.name']">
        <a-input v-model:value="insideData.data.name"/>
      </FormItem>
      </Col>
      <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="方法名" name="func">
        <a-input v-model:value="insideData.data.func"/>
      </FormItem>
      </Col>

      <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="位置" name="place" v-bind="validateInfos['data.place']">
        <Select v-model:value="insideData.data.place" 
        :get-popup-container="(tn) => tn.parentNode"
        :options="placeOptionsRef"></Select>
      </FormItem>
      </Col>

      <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="图标" name="icon">
        <a-input v-model:value="insideData.data.icon"/>
      </FormItem>
      </Col>

      <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="顺序" name="sort">
        <InputNumber v-model:value="insideData.data.sort" :min="0" :max="9999" style="width: 100%;"/>
      </FormItem>
      </Col>

    <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="是否提示" name="tip">
        <RadioGroup v-model:value="insideData.data.tip" :disabled="disTip">
          <Radio :value="1">提示</Radio>
          <Radio :value="0">不提示</Radio>
        </RadioGroup>
      </FormItem>
    </Col>
    <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
      <FormItem label="选中数量" name="tip">
        <RadioGroup v-model:value="insideData.data.selectedCount">
          <Radio :value="1">显示</Radio>
          <Radio :value="0">不显示</Radio>
        </RadioGroup>
      </FormItem>
    </Col>

    <Col span="24">
      <FormItem label="提示内容" name="tipContent"
      :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
      :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
      >
        <a-textarea v-model:value="insideData.data.tipContent" 
        :disabled="!(insideData.data.tip)"
        :autoSize="{ minRows: 3, maxRows: 6, }"
        placeholder="提示内容..."/>
      </FormItem>
    </Col>

    <Col span="24">
      <FormItem label="其他配置" name="confInfo"
      :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
      :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
      >
        <a-textarea v-model:value="insideData.data.otherConf" :autoSize="{ minRows: 3, maxRows: 6, }"/>
      </FormItem>
    </Col>

    <Col span="24">
      <FormItem label="备注" name="memo"
      :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
      :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
      >
        <a-textarea v-model:value="insideData.data.memo" placeholder="备注..."/>
      </FormItem>
    </Col>
    </Row>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="menuDrawer" setup>
import { reactive, ref, toRaw, watchPostEffect } from 'vue';
import { PageWrapDrawer } from '/@/components/PageWrapDrawer';
// import { CodeEditor, JsonPreview, MODE } from '/@/components/CodeEditor';
import { computed } from '@vue/reactivity';
import {
Col,
Form,
FormItem,
InputNumber,
Radio, RadioGroup,
Row,
Select, SelectProps,
} from 'ant-design-vue';
import { placeOptions } from './data';
import { create, update } from '/@/api/admin/button';

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    isCopy: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const insideData = reactive({
  data: {
    id: null,
    name: '',
    icon: '',
    place: 3,
    func: '',
    sort: 0,
    selectedCount: 0,
    tip: 0,
    tipContent: '',
    otherConf: '',
    memo: '',
  }
});

const title = ref('')
watchPostEffect(() => {
  if (props.show && props.isCopy) {
    title.value = '复制并创建 按钮'
  }
})

const placeOptionsRef = ref<SelectProps['options']>(placeOptions);

watchPostEffect(() => {
  let v1 = props.row as any
  if (v1) {
    insideData.data = {...v1}
  }
})

const disTip = computed(() => {
  if ((insideData.data.place === 1 || insideData.data.place === 3)) {
    insideData.data.tip = 0;
    return true ;
  }
  return false;
})

const rulesRef = reactive({
  'data.name': [
    {required: true, message: '请选择按钮',},
  ],
  'data.place': [
    {required: true, message: '请选择按钮位置',},
  ],
});
const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
  },
});

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    })
}

const onClose = () => {
  Object.assign(insideData, {data: {name: ''}});
  resetFields();
  emit('on-drawer-close');
};

</script>
